<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont">
        &#xe60e;
      </span>
    </div>
    <div class="header-search">
      <span class="iconfont">
        &#xe60f;
      </span>
      输入城市/景点/游玩主题
    </div>
    <div class="header-right">
      <router-link to="/city">
        <span class="city-name"> {{city}}</span>

        <span class="iconfont">
          &#xe627;
        </span>
      </router-link>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["city"])
  }
}
</script>
<style scoped lang="stylus">
@import '~css/var.styl'
.header
  width 100%
  line-height 0.88rem
  background $bgColor
  color $textColor
  font-size 0.36rem
  display flex
.header-left
  width 0.4rem
  padding 0 0.2rem
  text-align center
  font-weight bold
.header-search
  flex 1
  background #fff
  height 0.6rem
  margin 0.14rem 0
  border-radius 0.1rem
  color #e4e7ea
  line-height 0.6rem
  font-size 0.28rem
  padding-left 0.2rem
.header-right
  font-size 0.28rem
  padding 0 0.2rem
// .header-right .city-name
// white-space nowrap
// text-overflow ellipsis
// overflow hidden
a
  color #fff
</style>